<template>
  <div class="dashboard-container">
    <div class="left">
      <el-timeline class="padding0">
        <el-timeline-item>
          <el-card class="box-card">
            <el-link :underline="false" class="linkFont" @click="getAllAccs">查看所有数据 &nbsp;&nbsp;<svg-icon icon-class="eye-open" /></el-link>
          </el-card>
        </el-timeline-item>
        <el-timeline-item>
          <el-card class="box-card">
            <el-link :underline="false" class="linkFont" @click="dialogFormVisible = true">新增住宿信息 &nbsp;&nbsp;<i class="el-icon-circle-plus-outline" /></el-link>
          </el-card>
        </el-timeline-item>
        <el-timeline-item>
          <el-card class="box-card">
            <el-link :underline="false" class="linkFont">查找住宿信息 &nbsp;&nbsp;<i class="el-icon-search" /></el-link>
            <el-form ref="searchForm" :model="searchForm" label-width="80px" inline label-position="top" :rules="rules1">
              <el-form-item label="根据学生学号查找" prop="stuNum">
                <el-input v-model="searchForm.stuNum" style="width: 60%" placeholder="输入学生学号号" />
                <el-button type="primary" icon="el-icon-search" style="float: right" @click="searchDor"> 搜索</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <div class="right">
      <el-table
        v-loading="listLoading"
        :data="dorList"
        border
        height="600"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="stuNum"
          label="学号"
        />
        <el-table-column
          prop="quNum"
          label="区号"
          align="center"
        />
        <el-table-column
          prop="dongNum"
          label="栋号"
          align="center"
        />
        <el-table-column
          prop="roomNum"
          label="房间号"
          align="center"
        />
        <el-table-column
          prop="bedNum"
          label="床号"
          align="center"
        />
        <el-table-column
          prop="joinTime"
          label="入住日期"
          align="center"
        >
          <template slot-scope="scope">
            <i class="el-icon-time" />
            <span>{{  formatMyTime(scope.row.joinTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="170"
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-popconfirm
              title="确定删除吗？"
              @onConfirm="handleDelete(scope.$index, scope.row)"
            >
              <el-button
                slot="reference"
                size="mini"
                type="danger"
              >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="新增住宿信息" :visible.sync="dialogFormVisible">
      <el-form ref="myForm" :model="editableAcc" :rules="rules2" label-width="80px" label-position="left" class="editForm">
        <el-form-item label="学号" prop="stuNum">
          <el-input v-model="editableAcc.stuNum" :disabled="isEdit" />
        </el-form-item>
        <el-form-item label="区号" prop="quNum">
          <el-input v-model="editableAcc.quNum" :disabled="isEdit" />
        </el-form-item>
        <el-form-item label="栋号" prop="dongNum">
          <el-input v-model="editableAcc.dongNum" />
        </el-form-item>
        <el-form-item label="房间号" prop="roomNum">
          <el-input v-model="editableAcc.roomNum" />
        </el-form-item>
        <el-form-item label="床号" prop="bedNum">
          <el-input v-model="editableAcc.bedNum" />
        </el-form-item>
        <el-form-item label="入住日期" prop="joinTime">
          <el-date-picker
            v-model="editableAcc.joinTime"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="备注" prop="note">
          <el-input v-model="editableAcc.note" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="confirmForm('myForm')">确 定</el-button>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import { findAllAcc, selectAccById, deleteAcc, updateAccById, addAcc } from '@/api/accInfo'
export default {
  name: 'Dashboard',
  data() {
    return {
      dorList: [],
      editableAcc: {},
      searchForm: {
        stuNum: ''
      },
      dialogFormVisible: false,
      isEdit: false,
      listLoading: false,
      rules1: {
        stuNum: [
          { required: true, message: '请输入学生学号', trigger: 'blur' }
        ]
      },
      rules2: {
        stuNum: [
          { required: true, message: '请输入学生学号', trigger: 'blur' }
        ],
        quNum: [
          { required: true, message: '请输入区号', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        dongNum: [
          { required: true, message: '请输入栋号', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        roomNum: [
          { required: true, message: '请输入房间号', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        bedNum: [
          { required: true, message: '请输入床号', trigger: 'blur' }
        ],
        joinTime: [
          { type: 'date', required: true, message: '请输入入学日期', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  watch: {
    dialogFormVisible(n, o) {
      if (!n) {
        this.editableAcc = {}
        this.isEdit = false
      }
    }
  },
  created() {
    this.getAllAccs()
  },
  methods: {
    formatMyTime(date, op) {
      const d = new Date(date)
      return (
        d.getFullYear() +
          '年' +
        (d.getMonth() + 1) +
        '月' +
        d.getDate() +
        '日'
      )
    },
    getFormatDate(date) {
      const fillZero = function(num) {
        return num < 10 ? '0' + num : num
      }
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      // const hour = date.getHours()
      // const minute = date.getMinutes()
      // const second = date.getSeconds()
      return `${year}-${fillZero(month)}-${fillZero(day)}`
    },
    getAllAccs() {
      this.listLoading = true
      findAllAcc().then(res => {
        this.dialogFormVisible = false
        const list = res.data.accInfos
        this.dorList = list
        this.listLoading = false
      })
    },
    confirmForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            this.updateCollege()
          } else {
            this.addNewCollege()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    updateCollege() {
      let data = this.editableAcc
      data.joinTime = this.getFormatDate(new Date(data.joinTime))
      updateAccById(data).then(res => {
        this.getAllAccs()
        this.$message({
          showClose: true,
          message: '操作成功',
          type: 'success'
        })
      })
    },
    addNewCollege() {
      let data = this.editableAcc
      data.joinTime = this.getFormatDate(new Date(data.joinTime))
      addAcc(data).then(res => {
        this.getAllAccs()
        this.$message({
          showClose: true,
          message: '操作成功',
          type: 'success'
        })
      })
    },
    searchDor() {
      this.$refs.searchForm.validate((valid) => {
        if (valid) {
          this.listLoading = true
          selectAccById({ id: this.searchForm.stuNum }).then(res => {
            console.log(res)
            const list = res.accInfo
            this.dorList = list
            this.listLoading = false
          })
        } else {
          return false
        }
      })
    },
    handleEdit(index, row) {
      this.editableAcc = row
      this.isEdit = true
      this.dialogFormVisible = true
    },
    handleDelete(index, row) {
      deleteAcc({ id: row.stuNum }).then(res => {
        this.getAllAccs()
        this.$message({
          showClose: true,
          message: '操作成功',
          type: 'success'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 10px;
      min-width: 1280px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
  .left{
    width: 23%;
    min-width: 330px;
    text-align: center;
    float: left;
    font-weight: 700;
  }
  .right{
    float: left;
    margin-left: 3%;
    width: 71%;
  }
  .padding0{
    padding: 0;
  }
  .linkFont{
    font-weight: 700;
  }
  .editForm{
    width: 400px;
  }
  /deep/
  .el-form-item__label{
    float: left;
    font-weight: 500;
  }
</style>
